import { FrownOutlined, MehOutlined, SmileOutlined } from '@ant-design/icons';
import { Button, Modal, Rate } from 'antd';
import styles from '../index.less';

type Props = {
  visible: boolean;
  handleCancel: () => void;
  content: any;
};

const SeeEvaluate: React.FC<Props> = ({ visible, handleCancel, content }) => {
  const colorThem = localStorage.getItem('color') || '#1a7721';

  const customIcons: Record<number, React.ReactNode> = {
    1: <FrownOutlined style={{ fontSize: 14 }} />,
    2: <FrownOutlined style={{ fontSize: 14 }} />,
    3: <MehOutlined style={{ fontSize: 14 }} />,
    4: <SmileOutlined style={{ fontSize: 14 }} />,
    5: <SmileOutlined style={{ fontSize: 14 }} />,
  };

  return (
    <Modal
      visible={visible}
      onCancel={handleCancel}
      footer={[
        <>
          <Button
            style={{ backgroundColor: '#fff', color: colorThem }}
            key={'false'}
            onClick={handleCancel}
          >
            关闭
          </Button>
        </>,
      ]}
      className={styles.modalsStyle}
    >
      <div className={styles.modalSeeContent}>
        <div style={{ marginBottom: 8, fontWeight: 600 }}>
          我的评价：
          <Rate
            value={content.star}
            character={({ index }: any) => customIcons[index + 1]}
            disabled
          />
        </div>
        {content.usercontent}
      </div>
      {content.ifreply === '0' ? (
        <div style={{ margin: '10px 0 20px 30px', fontWeight: 600 }}>商家未回复</div>
      ) : (
        <div style={{ margin: '30px 30px' }}>
          <div style={{ marginBottom: 5, fontWeight: 600 }}>商家回复：</div>
          <div>{content.companycontent}</div>
        </div>
      )}
    </Modal>
  );
};

export default SeeEvaluate;
